<template>
	<view class="tab-box">
		<!-- <view class="btn-complete" @click="open">一键生成海报</view> -->
		<liu-poster ref="liuPoster" :width="630" :height="758" @change="change"></liu-poster>
		<image class="success-img" :src="url" @click="previewImg(url)"></image>
	</view>
</template>

<script>
	import {
		salse
	} from "@/api/wine/wine.js"
	export default {
		data() {
			return {
				url: '',
				avatar: '',
				name: '',
				phone: '',
				code:'',
			};
		},
		onLoad() {
			this.avatar = this.$store.getters.avatar
			this.name = this.$store.getters.name
			this.phone = this.$store.getters.mobile
			this.getCodeImg()
			
		},
		methods: {
			//获取二维码
			getCodeImg(){
				let that = this;
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				salse().then(response => {
					uni.hideLoading()
					if (response.code == 0) {
						// uni.$u.toast('成功提交申请')
						that.code=response.data.qrUrl
						that.open()
					}
				})
			},
			//开始绘制
			open() {
				let canvasList = [{
					type: 'color', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
					width: 630, //宽度(rpx)
					height: 758, //高度(rpx)
					x: 0, //x轴位置(离左边的距离rpx)
					y: 0, //y轴位置(离上边的距离rpx)
					radius: 20, //圆角(rpx)
					// lineWidth: 40, //边框宽度(rpx)
					// lineColor: '#000000', //边框颜色
					colorObj: {
						colorList: ['#fff'], //传入1个值为纯色，2个值为渐变色
						// direction: 2 //渐变色绘制方向(1:从左到右;2:从上到下;3:左上角到右下角;4:右上角到左下角)
					}, //type为color时必填
				}, {
					type: 'image', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
					width: 156, //宽度(rpx)
					height: 156, //高度(rpx)
					// lineWidth: 50, //边框宽度(rpx)
					// lineColor: '#fff', //边框颜色
					x: 30, //x轴位置(离左边的距离rpx)
					y: 30, //y轴位置(离上边的距离rpx)
					radius: 78, //圆角(rpx)
					path: this.avatar
				}, {
					type: 'text', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
					width: 350, //宽度(rpx)
					height: 40, //高度(rpx)
					x:220, //x轴位置(离左边的距离rpx)
					y: 70, //y轴位置(离上边的距离rpx)
					color: '#000', //文本颜色
					fontSize: 28, //文字大小(rpx)
					lineHeight: 40, //文字行高(rpx)
					bold: true, //文字是否加粗
					content: this.name, //文本内容(type为text时必填)
				}, {
					type: 'text', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
					width: 150, //宽度(rpx)
					height: 40, //高度(rpx)
					x: 220, //x轴位置(离左边的距离rpx)
					y: 130, //y轴位置(离上边的距离rpx)
					color: '#999999', //文本颜色
					fontSize: 24, //文字大小(rpx)
					lineHeight: 34, //文字行高(rpx)
					bold: false, //文字是否加粗
					content: this.phone, //文本内容(type为text时必填)
				}, {
					type: 'image', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
					width: 372, //宽度(rpx)
					height: 372, //高度(rpx)
					// lineWidth: 50, //边框宽度(rpx)
					// lineColor: '#fff', //边框颜色
					x: 130, //x轴位置(离左边的距离rpx)
					y: 250, //y轴位置(离上边的距离rpx)
					radius: 78, //圆角(rpx)
					path: this.code
				}, {
					type: 'text', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
					width: 350, //宽度(rpx)
					height: 40, //高度(rpx)
					x:200, //x轴位置(离左边的距离rpx)
					y: 650, //y轴位置(离上边的距离rpx)
					color: '#000', //文本颜色
					fontSize: 28, //文字大小(rpx)
					lineHeight: 40, //文字行高(rpx)
					bold: true, //文字是否加粗
					content: '点击放大后长按保存', //文本内容(type为text时必填)
				}, ]
				this.$nextTick(() => {
					this.$refs.liuPoster.init(canvasList)
				})
			},
			//绘制成功返回生成的海报图片地址
			change(e) {
				this.url = e
			},
			//预览生成的海报图片
			previewImg(url) {
				if (!url) return
				uni.previewImage({
					urls: [url]
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.tab-box {
		width: 630rpx;
		height: 758rpx;
		box-sizing: border-box;
		// background-color: #f0f0f0;
		margin: 200rpx auto;
		// background-color: red;

		.btn-reset {
			width: 100%;
			height: 72rpx;
			background: #FFFFFF;
			border-radius: 40rpx;
			border: 2rpx solid #FD430E;
			font-size: 30rpx;
			color: #3E3E3E;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.btn-complete {
			width: 98%;
			height: 76rpx;
			border-radius: 40rpx;
			font-size: 30rpx;
			color: #FFFFFF;
			background-color: #FD430E;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto;
		}

		.success-img {
			width: 100%;
			height: 758rpx;
			// margin-top: 20rpx;
		}
	}
</style>